<!--报表设置-->
<template>
<div>
<div class="table">
		<row>
		    <div class="divmenu">
			    <Col :lg="{span:2}" :md="{span:8}" :sm="{span:10}" :xs="{span:20}">
				     <Button  type="primary" @click="Add">
					     <p class="title">
						     <Icon type="plus-circled" size="20"></Icon>&nbsp;&nbsp;<span>新增</span>
					     </p>
				     </Button>
			     </Col>
				 <Col :lg="{span:2}" :md="{span:8}" :sm="{span:10}" :xs="{span:20}">
				     <Button type="primary"   @click="ShowUploadModal">
					     <p class="title">
						     <Icon type="ios-cloud-upload-outline" size="20"></Icon>&nbsp;&nbsp;<span>快速导入</span>
					     </p>
				     </Button>
			     </Col>
		    </div>
	    </row>
        <div class="divSearch">
			<Row>
				<Col :lg="{span:6}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchLabel">所属报表:</label>
					<Select v-model="SearchModel.TableCode" style="width:210px" class="searchInput" placeholder="全部" @on-change="initTableData()">
						<!--<Option :value="item.DictValue" v-for="item in ReportNameList" :key="item.DictValue">{{item.DictText}}({{item.DictValue}})</Option>-->
						<Option :value="item.DictValue" v-for="item in ReportNameList" :key="item.DictValue">{{item.DictText}}</Option>
					</Select>
				</Col>
				<Col :lg="{span:4}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchLabel">所属父级:</label>
					<Select v-model="SearchModel.ParentCode" class="searchInput" placeholder="全部" filterable @on-change="initTableData()">
						<Option value="">全部</Option>
						<Option v-for="option in SearchModel.options" :value="option.ItemCode" :key="option.ItemCode" :label="option.ItemName">
							<span>
								<b>{{option.ItemName}}</b>
							</span>
							<br/>
							<span style="color:#8d8b8b">代码:{{option.ItemCode}}</span>
							<br/>
							<span style="color:#8d8b8b">父级代码:{{option.ParentCode}}</span>
						</Option>
					</Select>
				</Col>	
				<Col :lg="{span:4}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchLabel">分类名称:</label>
					<Input v-model="SearchModel.ItemName" placeholder="请输入" class="searchInput"></Input>
				</Col>
				<Col :lg="{span:4}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchLabel">分类代码:</label>
					<Input v-model="SearchModel.ItemCode" placeholder="请输入" class="searchInput"></Input>
				</Col>
				<Col :lg="{span:4}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchLabel">状态:</label>
					<Select v-model="SearchModel.Status" class="searchInput"placeholder="请选择" @on-change="initTableData()">
						<Option value="">全部</Option>
						<Option value="1">启用</Option>
						<Option value="0">停用</Option>
					</Select>
				</Col>
				<Col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
					<Button icon="ios-search" type="primary" @click="initTableData()" class="searchButton">检索</Button>
				</Col>
			</Row>
		</div>		
	    <row><!--数据表格-->
		    <Col>
			    <i-table :context="self" ref="table" :stripe=true :columns="columnsData" 
				:data="tabledata" size="large" @on-select-all="selectAll()"
				 @on-select="selectSingel()" :height="clientHeight" border>
			    </i-table>
		    </Col>
	    </row>
	    <row><!--分页插件-->	   
			    <Col>
					 <!-- <spin size="large"></spin> -->
			    	 <Page class="pageComponent" :total="tableTotal" show-elevator show-sizer show-total placement="top"  @on-change="changePage"
					  @on-page-size-change="changePageSize" :page-size-opts='pageSizeOpts' :page-size="20">
			    	 </Page>
			    </Col>
	    </row>
    </div>
      <!--填报项目设置编辑弹窗-->
     <Modal v-model="ShowModal"  :mask-closable="false" >
	    <p style="display:none"  slot="close" @click="cancel('setListModel')"> <Icon type="close-circled" color="red" size="25"></Icon></p>
	    <p slot="header"  class="title">       
            <span style="font-size: 20px">报表分类信息编辑</span>
        </p>
		<Form ref="setListModel" :model="setListModel" :rules="setListRule" :label-width="80">
            <Form-item label="所属报表" prop="TableCode">
				<Select v-model="setListModel.TableCode" placeholder="请选择报表" @on-change="getEditItemList">
					<Option v-for="item in ReportNameList" :value="item.DictValue" :key="item.DictValue">{{item.DictText}}({{item.DictValue}})</Option>
				</Select>
			</Form-item>
			<Form-item label="所属父级分类" prop="ParentCode">
                <Select v-model="setListModel.ParentCode" placeholder="无父级分类" filterable>
					<Option value="">无父级分类</Option>
					<Option v-for="option in editOptionList" :value="option.ItemCode" :key="option.ItemCode" :label="option.ItemName">
						<span>
							<b>{{option.ItemName}}</b>
						</span>
						<br/>
						<span style="color:#8d8b8b">代码:{{option.ItemCode}}</span>
						<br/>
						<span style="color:#8d8b8b">父级代码:{{option.ParentCode}}</span>
					</Option>
				</Select>	
			</Form-item>
            <Form-item label="分类名称" prop="ItemName">
				<Input v-model="setListModel.ItemName" placeholder="请输入分类名称"></Input>
			</Form-item>
			<Form-item label="分类代码" prop="ItemCode">
				<Input v-model="setListModel.ItemCode" placeholder="请输入分类代码"></Input>
			</Form-item>
			<Form-item label="计量单位" prop="UnitName">
				<Input v-model="setListModel.UnitName" placeholder="请输入计量单位"></Input>
			</Form-item>
			<Form-item label="分类状态" prop="Status">
				<Select v-model="setListModel.Status" placeholder="请选择分类状态">
					<Option value="1">启用</Option>
					<Option value="0">禁用</Option>
				</Select>
			</Form-item>
			<Form-item label="排序编号" prop="Sort">
				<Input v-model="setListModel.Sort" placeholder="请输入排序号"></Input>
			</Form-item>
			<Form-item label="分类描述" prop="Remark">
				<Input v-model="setListModel.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
			</Form-item>
		</Form>
	    <div slot="footer">	
                <Button  @click="cancel('setListModel')">取消</Button>&nbsp;&nbsp;
                <Button  type="primary"  @click="handleSubmit('setListModel')">提交</Button>
        </div>
    </Modal>
	<Modal v-model="UploadModal"  :mask-closable="false"  >
		<p style="display:none"  slot="close" @click="cancel('setListModel')"> <Icon type="close-circled" color="red" size="25"></Icon></p>
	    <p slot="header"  class="title">       
            <span style="font-size: 20px">报表设置数据导入</span>
        </p>
		<Upload  :on-format-error="handleFormatError" :format="['xls','xlsx']" ref="upload"
		action="http://115.29.104.243:63330/api/SetList/PostExportExcel" :on-success="handleSuccess" :on-error="handelError">
			<Button type="ghost" icon="ios-cloud-upload-outline">选择文件</Button>
		</Upload>
		 <div slot="footer">	
                <Button  @click="closeUpload">关闭</Button>&nbsp;&nbsp;
               <Button  type="primary"  @click="ExportData()">开始导入</Button>
        </div>
	</Modal>
</div>
</template>
<script>
export default {
	data(){
		return {
			self:this,
			tableTotal:0,//表格记录条数
	        ShowModal:false,//modal开关,针对form填报表格
	        tabledata:[],	//页面表格数据	
            ReportNameList:this.GetGroupDict("ReportTableName"),//报表名称列表
            ParentClassList:[],//父分类列表
			UploadModal:false,
			pageSizeOpts: [20, 40, 50],//默认分页最大设置
			clientHeight:window.innerHeight-340,//设置表格高度
	        columnsData:[
				// {type: 'selection',width: 60,align: 'center'},
	            {title:'父级分类',key:'ParentCode'},
	            {title:'分类名称',key:'ItemName',ellipsis:true},
				{title:'分类代码',key:'ItemCode'},
	            {title:'计量单位',key:'UnitName'},
	            {title:'分类状态',key:'StatusName'},
                {title:'排序编号',key:'Sort'},
                {title:'所属报表',key:'TableName',ellipsis:true},  
                {title:'分类描述',key:'Remark',ellipsis:true},                                              
                {title: '操作',key: 'action',width: 200,align: 'center',
					render:(h,params)=>{
						return h('div', [
							h('Button', { class:{ieditColor:true},props: {type:'ghost',size:'small',icon:'ios-compose'},style: {marginRight: '5px'},on: {click: () => {this.Edit(params.row.Id) }}}, '编辑'),
							h('Button', { class:{ideleteColor:true},props: {type:'ghost',size:'small',icon:'ios-trash-outline'},on: {click: () => {this.Remove(params.row.Id); }}}, '删除')])
	                }
				}
            ],
            SearchModel:{PageNumber:1, PageSize:20, ParentCode:'',ItemName:'',ItemCode:'',UnitName:'',Status:'',TableName:'',Remark:'',options: [],},
            setListModel:{Id:0,ParentCode:'', ItemName:'',ItemCode:'', UnitName:'',Status:'',Remark:'',TableCode:''},
			editOptionList: [],
             //表单验证规则
	        setListRule: {//表单验证规则
                TableCode:[ { required: true, message: '请选择所属报表', trigger: 'change' }],	
	        	ItemName:[ { required: true, message: '请填写分类代码', trigger: 'blur' }],
	        	ItemCode:[ { required: true, message: '请填写分组代码', trigger: 'blur' }],
		        Status:[ { required: true, message: '请选择状态', trigger: 'change' }]
	        }
		}
	},
	mounted:function(){//根据浏览器窗口大小设置数据表格宽度
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight-340;
            })()
        };

    },
	methods:{
		//-----------------------------------------------数据导入---------------------------------------\\
		ShowUploadModal:function(){//打开模态框
			this.UploadModal=true;
		},
		closeUpload:function(){//关闭模态框
			this.UploadModal=false;
		},
		handleFormatError (file) {//判断选中的文件格式
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传 excel 文件。'
                });
		},
		handleSuccess:function(res, file){//导入成功
			this.$Notice.success({
				title: '文件'+file.name+'数据导入成功!'
			});
			this.initTableData();
		},
		handelError:function(error,file,fileList){//导入失败
			this.$Notice.error({
				title: '文件'+file.name+'数据导入失败!'
			});
		},
		//-----------------------------------------------数据导入---------------------------------------\\
		getSearchItemList() {
            if (this.SearchModel.TableCode != null && this.SearchModel.TableCode != '') {
                var self = this;
                this.$http.get('SetList/GetSearchList', { params: { tableCode: this.SearchModel.TableCode } }).then(function (res) {
                    self.SearchModel.options = res.data.model;
                });
            }
        },
		getEditItemList(tablecode) {
            var self = this;
            this.$http.get('SetList/GetSearchList', { params: { tableCode: tablecode } }).then(function (res) {
                self.editOptionList = res.data.model;
            });
        },
        Add:function(){
			this.ParentClassList=[];
            this.ShowModal=true;
        },
        handleSubmit:function(modelName){
            var self = this;
            self.$refs[modelName].validate((valid) => {
                if (valid) {
					if(self.setListModel.Id === 0)
					{
						 self.$http.post('SetList',self.setListModel).then(function(res){
							if(res.data.status===1)
							{
								self.$Notice.success({
									title: '报表分类添加成功!'
								});
								self.initTableData();
								self.ShowModal = false;
							}
							else{
								self.$Notice.warning({
									title: res.data.message
								});
							}
						});
					}
					else{//数据编辑
						self.$http.put('SetList',self.setListModel).then(function(res){
								if(res.data.status===1)
								{
									self.$Notice.success({
										title: '报表分类编辑成功!'
									});
									self.initTableData();
									self.ShowModal = false;
								}
								else{
									self.$Notice.warning({
										title: res.data.message
									});
								}
					});} 
				 }
           });
        },
        cancel:function(name){//关闭新增对话框
			this.$refs[name].resetFields();//关闭表单校验
			this.ShowModal=false;//关闭对话框
		},
		Edit:function(ID){
			var self=this;
			 this.$http.get("SetList", { params: { id: ID } }).then(//获取数据编辑项的值
                function (res) {
                    if (res.data.status == 1) {
                        self.getEditItemList(res.data.model.TableCode);
                        self.setListModel = res.data.model;
                        self.ShowModal = true;//打开信息编辑modal
                    }
                    else {
                        self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
                    }
                }
            );
		},
        initTableData:function(){//初始化表格数据
			this.getSearchItemList();
            var self=this;
            self.$http.post('SetList/PostPageList',self.SearchModel).then(function(res){
                if(res.data.status===1)
                {
                    self.tabledata=res.data.rows;
					self.tableTotal=res.data.total;
                }
				else{
					self.$Notice.warning({
						title: res.data.message
					});
				}
            });
        },
		//删除
        Remove(id) {
            var self = this;
            self.$Modal.confirm({
                title: '提示信息',
                content: '<p>数据删除后不可恢复，确定要删除？</p>',
                onOk: () => {
                    this.$http.delete("SetList", { params: { id: id } }).then(
                        function (res) {
                            if (res.data.status == 1) {
                                self.$Notice.success({ title: '删除成功！', desc: false });
                                self.initTableData();
                            }
                            else {
                                self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
                            }
                        }
                    );
                }
            });
        },
        changePage:function(pageIndex){//改变页码事件
			this.SearchModel.PageNumber=pageIndex;
			this.initTableData();
        },
        changePageSize:function(pageSize){//改变页面记录条数事件
			this.SearchModel.PageSize=pageSize;
			this.initTableData();			
        }
    },
    created:function(){ //初始化函数
		this.initTableData();
    },
    watch:{
    }
}
</script>